<template>
  <div id="login" :style="{height: windowHeight + 'px'}">
    <top/>
    <div id="login-box" :style="{height:windowHeight - 80 - 30 + 'px'}">
      <div>
        <div id="image"></div>
        <div id="input">
          <div>
            <p><input type="text" placeholder="请输入账户" v-model="acc"></p>
            <p><input type="password" placeholder="请输入密码" v-model="pd"></p>
            <p><input @click="submit" type="submit" value="提交"></p>
            <p class="other-operation">没有账号？去&nbsp;<a href="/register">注册</a>&nbsp;！</p>
            <p class="other-operation">我是游客，想去&nbsp;<a href="/index">逛逛</a>&nbsp;！</p>
          </div>
        </div>
      </div>
    </div>
    <copyright/>
  </div>
</template>

<script>
import top from "../base/top";
import copyright from "../base/copyright";
import axios from 'axios';
import {ip} from "../../data/ip";
export default {
  name: "login",
  components:{top,copyright},
  data(){
    return {
      windowHeight:0,
      acc: "",
      pd: ""
    }
  },
  mounted(){
    this.windowHeight = window.innerHeight
  },
  methods:{
    submit(){
      console.log(this.acc)
      console.log(this.pd)
      if(this.acc && this.pd){
        axios({
          url: ip+ "/api/"+"login-check",
          method:"get",
          params:{
            acc:this.acc,pd:this.pd
          }
        }).then(res=>{
          if(res.data.state === "success"){
            alert("登入成功")
            window.sessionStorage.setItem("userId",res.data.id)
            window.sessionStorage.setItem("userName",res.data.name)
            this.$router.push("/index")
          }
          else{
            if(res.data.problem === "acc"){
              alert("账号不存在")
            }
            else{
              alert("密码错误")
            }
          }
        }).catch(err=>{
          alert(err)
        })
      }
    }
  }
}
</script>

<style>
*{
  margin:0;
  padding:0;
}
#login{
  width:100%;
  background-color: #D7DADB;
}
#login > div:last-child{
  position:fixed;
  width:100%;
  bottom:0;
}

#login-box{
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
}

#login-box > div{
  width:700px;
  height:400px;
}
/* 左侧图片 */
#image{
  float:left;
  width:60%;
  height:100%;
  background-image: url("/static/login/programmer.jpg");
  background-repeat: no-repeat;
  background-position: center;
}
/* 右侧输入框 */
#input{
  float:right;
  height:100%;
  width:39%;
  padding-right:10px;
  border-bottom:1px #2C3E50 solid;
  border-top:1px #2C3E50 solid;
  border-right:1px #2C3E50 solid;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
}
#input > div{
  width:100%;
}
#input input{
  width:100%;
  height:40px;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size:16px;
  padding-left:10px;
}

#input input[type='submit']{
  background-color: #FC4349;
  outline: none;
  border:none;
  color:white;
  letter-spacing: 10px;
  cursor:pointer;
}

/* 注册或者去首页 */
.other-operation{
  width:100%;
  text-align: center;
  color:#2C3E50;
  margin-top:10px;
  font-size:16px;

}
.other-operation a{
  color:#FC4349;
  text-decoration: none;
}
</style>
